<template>
  <div class="donation-history">
    <!-- 标题区域 -->
    <div class="title-wrapper">
      <!-- 左侧竖条装饰 -->
      <div class="title-bar"></div>
      <!-- 标题文字 -->
      <span class="title-text">捐精历史</span>
    </div>

    <!-- 横线装饰区域 -->
    <div class="divider-wrapper">
      <!-- 渐变高亮横线 -->
      <div class="highlight-line"></div>
    </div>

    <!-- 主体内容区域 -->
    <div class="content-wrapper">
      <!-- Element Plus 表格组件 -->
      <el-table :data="physicalFeaturesList" v-loading="loading">
        <!-- 捐精日期列 -->
        <el-table-column prop="donationDate" label="捐精日期"></el-table-column>

        <!-- 捐赠医院/国家列 -->
        <el-table-column
          prop="donationHospitalCountry"
          label="捐赠医院/国家"
        ></el-table-column>

        <!-- 精子质量评估列 -->
        <el-table-column
          prop="spermQualityAb"
          label="精子质量评估（A+B）"
        ></el-table-column>

        <!-- 遗传筛查列 -->
        <el-table-column prop="geneticScreened" label="是否经过遗传筛查">
          <template #default="scope">
            <span>{{ scope.row.geneticScreened == 0 ? "否" : "是" }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from "@/store/modules/user";
import { defineProps, onMounted, ref } from "vue";
import { features } from "@/api/business/sperm";

// 用户 store
const userStore = useUserStore();

// 响应式变量：用户 ID（预留，当前未使用）
const userId = ref();

// 响应式变量：捐精历史列表数据
const physicalFeaturesList = ref([]);

// 响应式变量：加载状态
const loading = ref(true);

/**
 * 获取捐精历史列表数据
 */
function getList() {
  loading.value = true;
  features({
    donorId: props.donorId,
  }).then((res) => {
    loading.value = false;
    physicalFeaturesList.value = res.data;
  });
}

// 接收父组件传递的属性
const props = defineProps({
  userId: {
    type: String,
    required: true,
    default: "",
  },
  donorId: {
    type: String,
    required: true,
    default: "",
  },
});

// 组件挂载完成后获取数据
onMounted(() => {
  userId.value = props.userId;
  console.log(props.donorId, "donorId");
  getList();
});
</script>

<style lang="scss" scoped>
/* ===== 仅对「没写过字体/颜色」的文字补微软雅黑 + #333 ===== */
.donation-history {
  font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
  color: #333;
}
/* ========================================================= */

.donation-history {
  /* 根容器无需额外样式 */
}

/* 标题区域样式 */
.title-wrapper {
  margin-top: 20px;
  display: flex;
  align-items: center;

  /* 左侧竖条装饰 */
  .title-bar {
    width: 6px;
    height: 26px;
    background-color: #2b5cab;
  }

  /* 标题文字样式 —— 已定义字体颜色，保持不变 */
  .title-text {
    margin-left: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #2b5cab;
  }
}

/* 横线装饰区域样式 */
.divider-wrapper {
  height: 1px;
  background-color: #2b5cab;
  margin-top: 18px;
  position: relative;

  /* 渐变高亮横线样式 */
  .highlight-line {
    width: 460px;
    height: 5px;
    background: linear-gradient(to right, #2b5cab, #cedbf0);
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 0;
  }
}

/* 主体内容区域样式 */
.content-wrapper {
  border: 1px solid #a2c4e8;
  border-radius: 8px;
  margin-top: 23px;
  padding: 8px 8px; /* py-2 px-2 对应 8px */
}
</style>
